<div class="flex flex-col flex-auto p-6">
  <div class="w-full max-w-[800px] mx-auto">
    <h2 class="text-2xl font-semibold mb-4">Create New Agent</h2>

    <mat-card class="code-card mat-elevation-z8 p-5 pt-1 w-full">
        <mat-card-content>
            <div class="mb-6">
              <mat-radio-group aria-label="Select agent type" [formControl]="agentTypeControl">
                <mat-radio-button value="autonomous" class="mr-4" data-testid="autonomous-agent-radio">Autonomous</mat-radio-button>
                <mat-radio-button value="workflow" data-testid="workflows-agent-radio">Workflow</mat-radio-button>
              </mat-radio-group>
            </div>
            @if (agentTypeControl.value === 'autonomous') {
                <new-autonomous-agent></new-autonomous-agent>
            }
            @if (agentTypeControl.value === 'workflow') {
                <new-workflows-agent></new-workflows-agent>
            }
        </mat-card-content>
    </mat-card>
  </div>
</div>
